import React from 'react';
import { WeaInput } from 'ecCom';

class Header extends React.Component {
    render() {
        const { data = {}, eid } = this.props;
        const {
            refreshIconState, settingIconState, closeIconState, moreLocal, title,
            iconLogo, iconLock, iconRefresh, iconSetting, iconClose, iconMore, style,
        } = data;
        return (
            <div>
                <div className="header" id={`header_${eid}`} style={{ position: 'relative', ...style }}>
                    <span className="icon" id={`icon_${eid}`}>
                        <img src={iconLogo} alt="" />
                    </span>
                    <span className="title" id={`title_${eid}`} ><WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@igakyx`} viewAttr={1} isBase64={true} inputType={'multilang'} value={title} /></span>
                        <span className="toolbar" id={`toolbar_${eid}`} style={{ position: 'absolute' }}>
                            <ul>
                                <li><a href="javascript:;"><img src={iconLock} alt="" /></a></li>
                                {refreshIconState ? <li><a href="javascript:;"><img src={iconRefresh} alt="" /></a></li> : ''}
                                {settingIconState ? <li><a href="javascript:;"><img src={iconSetting} alt="" /></a></li> : ''}
                                {closeIconState ? <li><a href="javascript:;"><img src={iconClose} alt="" /></a></li> : ''}
                                {moreLocal ? <li><a href="javascript:;"><img src={iconMore} alt="" /></a></li> : ''}
                            </ul>
                        </span>
                </div>
            </div>
        );
    }
}

export default Header;
